<template>
  <!--最外层的div-->
  <div class="layout-container">
    <!--顶部条件筛选-->
    <div class="layout-container-form flex space-between">
      <div class="layout-container-form-handle">
        <!-- 筛选是不是已经联系过了 -->
        <el-select v-model="tableParams.is_connect"
                   placeholder="是否联系">
          <el-option label="全部客户"
                     :value="null">
          </el-option>
          <el-option label="未联系"
                     value="0">
          </el-option>
          <el-option label="已联系"
                     value="1">
          </el-option>
        </el-select>

        <div class="layout-container-form-search">
          <el-button type="primary"
                     :icon="Search"
                     class="search-btn"
                     @click="getTableData(true)">搜索</el-button>
        </div>

      </div>
      <div class="layout-container-form-search">
        <!-- <el-button @click="toSendMsg"
                   type="primary"
                   v-if="tableParams.is_connect == 0">全部私信</el-button> -->
      </div>
    </div>
    <!-- 
      下面的表格
    -->
    <div class="layout-container-table">
      <Table ref="table"
             v-model:page="page"
             v-loading="loading"
             :data="tableData"
             @getTableData="getTableData">

        <el-table-column prop="send_time"
                         label="评论时间"
                         align="center" />

        <el-table-column label="抓取时间"
                         align="center">
          <template #default="scope">
            <span>
              {{parseTime(scope.row.create_time)}}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="comment_msg"
                         label="评论内容"
                         align="center" />

        <el-table-column prop="username"
                         label="用户名"
                         align="center" />

        <el-table-column prop="user_home_url"
                         label="用户主页"
                         align="center" />

        <el-table-column prop="task_name"
                         label="所属任务"
                         align="center" />

        <el-table-column prop="is_connect"
                         label="是否联系"
                         align="center">
          <template #default="scope">
            <span v-if="scope.row.is_connect == '0'"
                  class="ySuccess">
              未联系
            </span>

            <span v-else
                  class="yDanger">
              已联系
            </span>
          </template>
        </el-table-column>

      </Table>
      <!--弹窗-->
      <Layer :layer="layer"
             @getTableData="getTableData"
             v-if="layer.show" />
    </div>
  </div>
</template>
<script lang="ts">
import { parseTime } from "@/utils/utils.ts";
import { defineComponent, ref, reactive, getCurrentInstance } from "vue";
import Table from "@/components/table/index.vue";
// 引入的是一个对象（java里的那个对象），自定义的数据类型，或者叫实体类
import { Page } from "@/components/table/type";
// import { getData, del } from "@/api/table";
import { getCustomerListApi, sendMsgApi } from "@/api/yuange/dy";
import Layer from "./layer.vue";
import { ElMessage } from "element-plus";
import type { LayerInterface } from "@/components/layer/index.vue";
import { Plus, Search, Delete } from "@element-plus/icons";
export default defineComponent({
  name: "crudTable",
  components: {
    Table,
    Layer,
  },
  methods: {
    //运行

    parseTime(value) {
      let time = parseTime(value);
      // console.log(time, "===");
      return time;
    },
  },
  setup(prop, ctx) {
    // 弹窗控制器
    const layer: LayerInterface = reactive({
      show: false,
    });

    //路由参数放到全局变量中（子组件用emit 方法，调用的函数，无法使用getCurrentInstance，原因不明）
    const { proxy } = getCurrentInstance();

    // 分页参数, 供table使用
    const page: Page = reactive({
      index: 1,
      size: 10,
      total: 0,
    });
    //标志等待状态的参数
    const loading = ref(true);
    //表格数据的参数
    const tableData = ref([]);
    //其他的筛选参数
    const tableParams = reactive({
      is_connect: "0", //是否联系，1已经联系，0 未联系
    });

    // 获取表格数据
    // params <init> Boolean ，默认为false，用于判断是否需要初始化分页
    const getTableData = (init: boolean) => {
      loading.value = true;
      //是不是第一页
      if (init) {
        page.index = 1;
      }

      let params = {
        page: page.index,
        pageSize: page.size,
        ...tableParams,
      };

      let route = proxy.$root.$route;
      if (route.query.taskId) {
        params.task_id = route.query.taskId;
      }

      //获取列表数据
      getCustomerListApi(params)
        .then((res) => {
          console.log(res, "评论列表");
          if (res.code == 200) {
            tableData.value = res.data.list;
            page.total = res.data.total;
          }
        })
        .catch((error) => {
          tableData.value = [];
          page.index = 1;
          page.total = 0;
        })
        .finally(() => {
          loading.value = false;
        });
    };

    getTableData(true);
    return {
      tableParams, //条件筛选参数
      proxy,
      Plus, //Plus图标名称，
      Search, //引入的图标
      Delete, //引入的图标
      tableData, //表格数据
      loading, //loading
      page, //分页信息
      layer, //传递给弹窗的参数
      getTableData, //获取列表数据的方法
    };
  },
});
</script>

<style lang="scss" scoped>
</style>